import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/resources/pages/login/phonecode_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:motion_toast/motion_toast.dart';
import 'package:motion_toast/resources/arrays.dart';
import 'package:nylo_framework/nylo_framework.dart';
import '../../../app/controllers/login_controller.dart';
import '../../../bootstrap/helpers.dart';
import '../../../config/constant.dart';

class PhoneloginPage extends NyPage<LoginController> {
  static String path = '/phonelogin';

  @override
  init() async {
    controller!.phoneController.text = "";
    // refreshPage();
    NyLogger.debug("创建 PhoneloginPage 页面");
    // To update the state,
    // use: refreshPage(setState: () { });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: ScreenSize);

    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("public/assets/images/login_bg.png"),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SafeArea(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () async {
                      FocusScope.of(context).unfocus();
                      NyLogger.debug("关闭键盘");
                      Navigator.pop(context);
                    },
                    child: Container(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        width: 84.w,
                        height: 84.w,
                        margin: EdgeInsets.only(top: 40.w, left: 40.w),
                        decoration: BoxDecoration(
                          border: Border.all(
                            width: 4.w,
                            color: ThemeColor.get(context)
                                .fontGrey
                                .withOpacity(.05),
                          ),
                          borderRadius: BorderRadius.circular(50.sp), // 圆角半径
                        ),
                        child: Icon(
                          Icons.arrow_back_outlined,
                          color: ThemeColor.get(context).background,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.symmetric(horizontal: 80.w),
                    margin: EdgeInsets.only(top: 65.w),
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "手机号登录",
                                style: TextStyle(
                                    fontWeight: FontWeight.w900,
                                    fontSize: 50.sp,
                                    color: ThemeColor.get(context).background),
                              ),
                              Text(
                                "未注册的手机号验证通过后自动完成注册",
                                style: TextStyle(
                                    fontWeight: FontWeight.w900,
                                    fontSize: 25.sp,
                                    color: ThemeColor.get(context).background),
                              )
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 280.w,
                        ),
                        Container(
                          child: Column(
                            children: [
                              Container(
                                height: 96.h,
                                // padding: EdgeInsets.all(5),
                                decoration: BoxDecoration(
                                  color: ThemeColor.get(context)
                                      .fontGrey
                                      .withOpacity(.3),
                                  borderRadius: BorderRadius.circular(50.sp),
                                ),
                                child: TextField(
                                  keyboardType: TextInputType.number,
                                  inputFormatters: <TextInputFormatter>[
                                    FilteringTextInputFormatter.digitsOnly
                                  ],
                                  controller: controller!.phoneController,
                                  maxLength: 11,
                                  cursorColor:
                                      ThemeColor.get(context).background,
                                  cursorHeight: 50.w,
                                  style: TextStyle(
                                    color: ThemeColor.get(context).background,
                                  ),
                                  decoration: InputDecoration(
                                    counterText: '',
                                    contentPadding:
                                        EdgeInsets.symmetric(horizontal: 40.w),
                                    filled: true,
                                    fillColor: Colors.transparent,
                                    // 设置父容器的背景颜色为透明
                                    border: InputBorder.none,
                                    hintText: '请输入手机号',
                                    hintStyle: TextStyle(
                                      color: ThemeColor.get(context).background,
                                      fontSize: 34.sp,
                                    ),
                                  ),
                                ),
                              ),
                              SizedBox(
                                height: 50.w,
                              ),
                              InkWell(
                                onTap: () => controller!.check(context),
                                child: Container(
                                  decoration: BoxDecoration(
                                    // color: Colors.transparent,
                                    gradient: LinearGradient(
                                      begin: Alignment.topCenter,
                                      end: Alignment.bottomCenter,
                                      colors: [
                                        ThemeColor.get(context)
                                            .primaryBackgroundDeep,
                                        ThemeColor.get(context)
                                            .primaryBackgroundLight,
                                      ],
                                    ),
                                    border: Border.all(
                                      width: 4.w,
                                      color: ThemeColor.get(context)
                                          .primaryBackgroundDeep,
                                    ),
                                    borderRadius:
                                        BorderRadius.circular(50.sp), // 圆角半径
                                  ),
                                  width: 600.w,
                                  height: 96.h,
                                  child: Center(
                                    child: Text(
                                      "获取验证码",
                                      style: TextStyle(
                                        fontSize: 32.sp,
                                        color:
                                            ThemeColor.get(context).background,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Expanded(child: SizedBox()),
                  Container(
                    child: GestureDetector(
                      onTap: () {
                        debugPrint(
                            "message" + controller!.isChecked.toString());
                        controller!.isChecked = !(controller!.isChecked);
                        refreshPage();
                      },
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          controller!.isChecked
                              ? Icon(
                                  Icons.radio_button_checked_outlined,
                                  size: 40.sp,
                                  color: ThemeColor.get(context)
                                      .primaryBackgroundDeep,
                                )
                              : Icon(
                                  Icons.circle_outlined,
                                  size: 40.sp,
                                  color: ThemeColor.get(context).background,
                                ),
                          SizedBox(
                            width: 10.w,
                          ),
                          Text('同意《用户协议》和《隐私协议》',
                              style: TextStyle(
                                  color: ThemeColor.get(context).background,
                                  fontSize: 28.sp)),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 155.w,
                  )
                ],
              ),
            )
          ],
        ));
  }
}
